<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :title="title"
    :visible="visible"
    :width="800"
    cancelText="关闭"
    @cancel="handleCancel"
    @ok="handleOk">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="模板标题"
        >
          <a-input
            v-decorator="['templateName', validatorRules.templateName]"
            placeholder="请输入模板标题"
            style="width: 122%"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="模板CODE"
        >
          <a-input
            v-decorator="['templateCode', validatorRules.templateCode ]"
            :disabled="disable"
            placeholder="请输入模板编码"
          />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="模板类型"
        >
          <j-dict-select-tag
            v-decorator="['templateType',validatorRules.templateType ]"
            :triggerChange="true"
            dictCode="msgType"
            placeholder="请选择模板类型"
            @change="handleChangeTemplateType"
          />
        </a-form-item>
        <a-form-item
          v-show="!useEditor"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="模板内容"
        >
          <a-textarea
            v-decorator="['templateContent',
             validatorRules.templateContent ]"
            :autosize="{ minRows: 8, maxRows: 8 }"
            placeholder="请输入模板内容"
          />
        </a-form-item>
        <a-form-item
          v-show="useEditor"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="模板内容"
        >
          {{templateEditorContent}}
          <j-editor v-model="templateEditorContent"></j-editor>
        </a-form-item>
        <!-- 系统消息 -->
        {{ model.templateType }} {{ model.templateType == 4 }} {{model.receiver}}
        <a-form-item
          v-if="templateType==4"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="接收者"
        >
          <j-select-multi-user
            v-decorator="['receiver', {required: templateType===4}]"
            placeholder="请选择系统用户"
          />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import {duplicateCheck} from '@/api/api'
import JEditor from '@/components/jeecg/JEditor'
import JSelectMultiUser from '@comp/jeecgbiz/JSelectMultiUser'

export default {
  name: 'SysMessageTemplateModal',
  components: {
    JSelectMultiUser,
    JEditor
  },
  data() {
    return {
      title: '操作',
      visible: false,
      disable: true,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        templateCode: {rules: [{required: true, message: '请输入模板CODE!'}, {validator: this.validateTemplateCode}]},
        templateName: {rules: [{required: true, message: '请输入模板标题!'}]},
        templateContent: {rules: []},
        templateType: {rules: [{required: true, message: '请输入模板类型!'}]},
        sysUsername: {}
      },
      url: {
        add: '/message/sysMessageTemplate/add',
        edit: '/message/sysMessageTemplate/edit'
      },
      useEditor: false,
      templateType: undefined,
      templateEditorContent: ''
    }
  },
  created() {
  },
  methods: {
    add() {
      this.disable = false
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      record.templateType = record.templateType - 0
      this.useEditor = (record.templateType === 2) || (record.templateType === 4)
      if (this.useEditor) {
        this.templateEditorContent = record.templateContent
      } else {
        this.templateEditorContent = ''
      }
      this.visible = true
      this.$nextTick(() => {
        if (this.useEditor) {
          this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateName', 'templateTestJson', 'templateType', 'receiver'))
        } else {
          this.form.setFieldsValue(pick(this.model, 'templateCode', 'templateContent', 'templateName', 'templateTestJson', 'templateType', 'receiver'))
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disable = true
    },
    handleOk() {
      this.model.templateType = this.templateType
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化

          if (this.useEditor) {
            formData.templateContent = this.templateEditorContent
          }
          console.log(formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })

        }
      })
    },
    validateTemplateCode(rule, value, callback) {
      var params = {
        tableName: 'sys_sms_template',
        fieldName: 'template_code',
        fieldVal: value,
        dataId: this.model.id
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback(res.message)
        }
      })

    },
    handleCancel() {
      this.close()
    },
    handleChangeTemplateType(value) {
      value = value - 0
      //如果是邮件类型那么则改变模板内容是富文本编辑器
      this.useEditor = (value === 2) || (value === 4)
      this.templateType = value
      this.$forceUpdate()
    }

  }
}
</script>

<style scoped>

</style>
